<template>
  <div class="fundlist">
    <div>
      <el-form>
        <el-form-item label="按照时间筛选">
          <!-- 时间选择器 -->
          <el-date-picker
            v-model="searchValue"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <el-button type="primary" class="search" plain @click="handleSearch">筛选</el-button>
          <el-button
            class="btnRight"
            type="primary"
            plain
            @click="handleAdd"
            v-if="user.identity == 'manager'"
          >添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" style="width: 100%" v-if="tableData.length" height="300" border>
      <el-table-column type="index" label="序号" align="center" width="70"></el-table-column>
      <el-table-column label="创建时间" width="250" align="center">
        <template slot-scope="scope">
          <el-icon name="time"></el-icon>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="收支类型" align="center" width="80"></el-table-column>
      <el-table-column prop="describe" label="收支描述" align="center" width="80"></el-table-column>
      <el-table-column prop="income" label="收入" align="center" width="100">
        <template slot-scope="scope">
          <span style="color:#00d053">+ {{ scope.row.income }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="expend" label="支出" align="center" width="100">
        <template slot-scope="scope">
          <span style="color:#f56767">- {{ scope.row.income }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="cash" label="帐户现金" align="center" width="100">
        <template slot-scope="scope">
          <span style="color:#4db3ff">{{ scope.row.cash }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" align="center" width="170"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope"  v-if="user.identity == 'manager'">
          <el-button
            size="small"
            type="warning"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Dialog :dialog="dialog" @update="getProfile" :formData="formData"/>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="paginations.total"
        :current-page="paginations.page_index"
        :page-sizes="paginations.page_sizes"
        :page-size="paginations.page_size"
        :layout="paginations.layout"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import Dialog from "../components/DialogFound";
export default {
  data() {
    return {
      tableData: [],
      dialog: {
        show: false,
        title: "",
        option: "edit" //用于判断传入子组件时是编辑还是添加功能
      },
      formData: {
        type: "",
        describe: "",
        income: "",
        expend: "",
        cash: "",
        remark: "",
        id: ""
      },
      //   分页
      paginations: {
        page_index: 1, //默认当前页为1
        total: 100,
        page_size: 5, //一页显示多少条
        page_sizes: [5, 10, 15, 20], //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper" //翻页属性
      },
      allTableData: [],
      searchValue: "",
      filterTabData: []
    };
  },
  components: {
    Dialog
  },
  computed: {
    user() {
      //判断权限
      return this.$store.getters.user;
    }
  },
  created() {
    this.getProfile();
  },
  methods: {
    getProfile() {
      this.$axios.get("/api/profile").then(res => {
        // this.tableData = res.data;
        this.allTableData = res.data;
        this.filterTabData = res.data;
        // 设置分布数据
        this.setPageinations();
        console.log(res);
      });
    },
    handleAdd() {
      this.dialog = {
        title: "添加资金信息",
        show: true,
        option: "add"
      };
      this.formData = {
        type: "",
        describe: "",
        income: "",
        expend: "",
        cash: "",
        remark: "",
        id: ""
      };
    },
    handleEdit(index, row) {
      this.dialog = {
        title: "编辑资金信息",
        show: true,
        option: "edit"
      };
      this.formData = {
        type: row.type,
        describe: row.describe,
        income: row.income,
        expend: row.expend,
        cash: row.cash,
        remark: row.remark,
        id: row._id
      };
    },
    handleDelete(index, row) {
      console.log(row._id);
      this.$axios
        .delete(`/api/profile/delete/${row._id}`)
        .then(res => {
          this.$message("删除成功");
          this.getProfile();
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleSizeChange(page_size) {
      console.log(`每页显示 ${page_size} 条`);
      this.paginations.page_index = 1;
      this.paginations.page_size = page_size;
      this.tableData = this.allTableData.filter((item, index) => {
        return index < page_size;
      });
    },
    handleCurrentChange(page) {
      console.log(`当前页: ${page}`);
      //   一页默认显示5条
      let index = this.paginations.page_size * (page - 1);
      let nums = this.paginations.page_size * page;
      let tables = [];
      for (let i = index; i < nums; i++) {
        //   判断点击每页面显示多少条数据越界问题
        if (this.allTableData[i]) {
          //如果this.allTableData中有i的数值长度
          tables.push(this.allTableData[i]);
        }
        this.tableData = tables;
      }
    },
    setPageinations() {
      // 请求数据后设置分页属性
      this.paginations = {
        total: this.allTableData.length,
        page_index: 1,
        page_size: 5, //一页显示多少条
        page_sizes: [5, 10, 15, 20], //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper" //翻页属性
      };
      //   过滤页面表格显示的数据
      this.tableData = this.allTableData.filter((item, index) => {
        // 把小于5条的数据返回出去,(page_size为定义的每页面显示5条)
        return index < this.paginations.page_size;
      });
    },
    handleSearch() {
      //筛选
      if (this.searchValue) {
        const sTime = this.searchValue[0].getTime(); //转成毫秒
        const eTime = this.searchValue[1].getTime();
        // 根据时间实现过滤
        this.allTableData = this.filterTabData.filter(item => {
          //对item中的data进行判断
          let date = new Date(item.date); //把字符串转成标准时间
          let time = date.getTime(); //时间转成毫秒
          return time >= sTime && time <= eTime;
        });
        // 调用分布数据
        this.setPageinations();
      } else {
        this.getProfile();
        return;
      }
    }
  }
};
</script>

<style scoped>
.fundlist {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
.search {
  margin-left: 20px;
}
.btnRight {
  /* width: 100%; */
  float: right;
}
.el-pagination {
  text-align: right;
  margin-top: 10px;
}
</style>
